<template>
  <view class="marquee-wrapper">
    <view class="marquee" :style="{ animationDuration: duration + 's' }">
      <slot></slot>
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  /** 滚动速度（像素/秒） */
  speed: {
    type: Number,
    default: 50
  },
  /** 可选固定高度 */
  height: {
    type: [String, Number],
    default: 'auto'
  }
})

const duration = ref(30)

onMounted(() => {
  const query = uni.createSelectorQuery().in(document)
  query
    .select('.marquee')
    .boundingClientRect((rect) => {
      if (rect && rect.width) {
        duration.value = rect.width / props.speed
      }
    })
    .exec()
})
</script>

<style lang="scss" scoped>
.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.marquee {
  display: inline-flex;
  animation-name: marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>
